<script setup>
import { ref, computed, onMounted, defineProps } from 'vue'
import MainMenu from './components/sys/MainMenu.vue'
const { params } = defineProps(["params"]);
const { sys } = params;

const tabItems = ref([

]);
const tabActive = ref("_default");

const sizeMgr = computed(() => {
  let winHeight = window.innerHeight;
  let headerHeight = 60;
  let contentHeight = winHeight - (headerHeight + 30);
  let leftNavHeight = (winHeight - (headerHeight - 10)) + "px";
  return {
    "headerHeight": headerHeight + "px",
    contentHeight,
    leftNavHeight
  }
});

onMounted(() => {
  document.title = "项目工程管理系统";
});

function addItem(data) {
  let key = data.id;
  let allItems = tabItems.value;
  let current = allItems.filter(x => {
    return x.name == key;
  });
  if (current && current.length > 0) {
    tabActive.value = current[0].name;
  } else {
    tabItems.value.push({
      "name": data.id,
      "title": data.title,
      "src": funLinkHref(data)
    });
    tabActive.value = data.id;
  }
}

function removeItem(itemName) {
  var tabs = tabItems.value;
  tabItems.value = tabs.filter(x => x.name != itemName);
}

function openMenu(data) {
  addItem(data);
}

function funLinkHref(meta) {
  return meta.href || "/meta-view/" + meta.view
}
</script>
<template>
  <div class="common-layout" :stretch="true">
    <el-container>
      <el-header :height="sizeMgr.headerHeight">
        项目工程管理系统
      </el-header>
      <el-container>
        <el-aside width="260px">
          <el-scrollbar :height="sizeMgr.leftNavHeight">
            <main-menu :sys="sys" @menu-click="openMenu" :height="sizeMgr.leftNavHeight" />
          </el-scrollbar>
        </el-aside>
        <el-container direction="vertical">
          <el-tabs @tab-remove="removeItem" v-model="tabActive">
            <el-tab-pane :closable="false" label="概 要" name="_default">
            </el-tab-pane>
            <el-tab-pane v-for="item in tabItems" :label="item.title" :key="item.name" :name="item.name"
              :closable="true">
              <iframe width="100%" :height="sizeMgr.contentHeight" style="border: none;" :src="item.src"></iframe>
            </el-tab-pane>
          </el-tabs>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style>
html {
  overflow: hidden
}
</style>